<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="../../js/Width.js" type="text/javascript" charset="utf-8"></script>
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../../css/orderDetails.css" />

	</head>

	<body style="background-color: #F4F4F4;">
		<div id="loadings" class='loadings'>
			<div class='line-scale-pulse-out'>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
				<div></div>
			</div>
		</div>

		<div id="details">
			<header class="mui-bar mui-bar-nav">
				<a style="color: #fff;" class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title" style="color: #fff;">{{detailsData.routName||'工单详情'}}</h1>
				<!--
                	作者：1169774483@qq.com
                	时间：2018-06-15
                	描述：指派任务按钮 、 后期会根据角色等级判断是否显示
                -->
				<div class="save" v-if="stand" @click="saveClick">指派任务</div>
			</header>
			<div class="content">
				<!--
                	作者：1169774483@qq.com
                	时间：2018-06-07
                	描述： 上半部
                -->
				<div class="item-wapper margin-top15">
					<div class="desc bottom-underline">
						<span class="title" v-if="detailsData.routName">{{detailsData.routName}}</span> {{detailsData.rouDetails}}
					</div>
					<div v-if="imgList" class="bottom-underline mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
						<div class="mui-scroll">
							<div class="img-wapper margin-top15 ">
								<div class="item-item" v-for="item in detailsData.imgList">
									<img :src="item.filePath" :data-preview-src="item.filePath" data-preview-group="1" />
								</div>
							</div>
						</div>
					</div>

					<div class="record-wapper" v-if="detailsData.reptVoiceList">
						<div class="record-item" v-for="(item,index) in detailsData.reptVoiceList" @click="playAudio(item.filePath)">
							<img class="record-icon" src="../../images/wifi.png" />
							<div v-text="'语音 - '+ index "></div>
						</div>
					</div>
				</div>
				<!--
                	作者：1169774483@qq.com
                	时间：2018-06-07
                	描述：中部
                -->

				<div class="orderUser margin-top15">
					<div class="item" v-if="detailsData.address">
						<div class="item-title bottom-underline">
							<span class="title">住址</span>
							<span class="desc">{{detailsData.address}}</span>
						</div>
					</div>
					<div class="item" v-if="detailsData.contactPerson">
						<div class="item-title bottom-underline">
							<span class="title">联系人</span>
							<span class="desc">{{detailsData.contactPerson}}</span>
						</div>
					</div>
					<div class="item" @click="goiponeClick(detailsData.contactPhone)" v-if="detailsData.contactPhone">
						<div class="item-title">
							<span class="title">联系电话</span>
							<div class="ipone">{{detailsData.contactPhone}} <span class="mui-icon mui-icon-phone"></span></div>
						</div>
					</div>
				</div>

				<div class="orderUser margin-top15" v-if="detailsData.LeaderPhone">
					<div class="item">
						<div class="item-title bottom-underline">
							<span class="title">物资名称</span>
							<span class="desc">{{detailsData.matName}}</span>
						</div>
					</div>
				</div>
				<div class="orderUser" v-if="detailsData.LeaderPhone">
					<div class="item">
						<div class="item-title bottom-underline">
							<span class="title">负责人名称</span>
							<span class="desc">{{detailsData.LeaderName}}</span>
						</div>
					</div>
				</div>
				<div class="orderUser" v-if="detailsData.LeaderPhone">
					<div class="item" @click="goiponeClick(detailsData.LeaderPhone)">
						<div class="item-title">
							<span class="title">负责人电话</span>
							<div class="ipone">{{detailsData.LeaderPhone }} <span class="mui-icon mui-icon-phone"></span></div>
						</div>
					</div>
				</div>

				<!--
                	作者：1169774483@qq.com
                	时间：2018-06-07
                	描述：下部分
                -->
				<div class="schedule margin-top15">

					<div v-if="sate" class="button-wapper">
						<div class="done" @click="fanhuiClick">返回</div>
						<div class="over" @click="wanchengClick">完成</div>
					</div>
					<div v-else class="fanhui" @click="fanhuiClick">
						返回
					</div>

					<div class="flowPath-wapper margin-top15" v-if="detailsData.repairsLogList">
						<div class="schedule-shuxian"></div>
						<div :class="index==0?'list-item left-icon-red':'list-item left-icon-hui'" v-for="(item,index) in detailsData.repairsLogList">
							<div class="item-time">{{item.replCD}}</div>
							<div class="item-title bottom-underline">{{item.replDetails}}</div>
						</div>
					</div>
				</div>

				<div class="guideline margin-top15" v-if="detailsData.routRemarks">
					<div class="guideline-title bottom-underline">工作指引</div>
					<div class="guideline-text">
						{{detailsData.routRemarks}}
					</div>
				</div>
			</div>

			<div class="mrk-record" v-if="record">
				<div class="record">
					<img class="record-img" src="../../images/luyin-f.png" />
					<span class="record-span">播放中...</span>
				</div>
			</div>
		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/mui.zoom.js"></script>
		<script src="../../js/mui.previewimage.js"></script>
		<script src="../../js/util.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="https://cdn.bootcss.com/fastclick/1.0.6/fastclick.min.js"></script>
		<script type="text/javascript">
			var details = new Vue({
				el: '#details',
				data: {
					sate: true,
					stand: false,
					imgList: true,
					repairsLogList: true,
					detailsData: {},
					pageData: {},
					record: false,
					filename: ''
				},
				methods: {

					goiponeClick: function(ipone) {
						dialipone(ipone) // 调用拨打电话方法
					},
					saveClick: function() { // 点击指派任务按钮方法
						var pageData = this.pageData
						mui.openWindow({
							url: 'staffList.html',
							id: 'staffList.html',
							extras: {
								rouID: pageData.rouID,
								rouType: pageData.rouType,
								gtaID: pageData.gtaID
							},
							waiting: {
								autoShow: false
							}
						});
					},

					fanhuiClick: function() { //  返回上一页
						mui.back()
					},
					wanchengClick: function() { // 点击完成发生事件
						var that = this
						plus.nativeUI.confirm("您确定任务已完成？", function(e) {
							if(e.index == 0) {
								mui.post(httpUrl.testUrl + '/api/TaskAssignments/AchieveTask', {
									rouID: that.pageData.rouID,
									rouType: that.pageData.rouType,
									gtaID: that.pageData.gtaID
								}, function(res) {
									if(res.code === 1001) {
										mui.toast('提交任务成功!')
										setTimeout(function() {
											mui.back()
											var list = plus.webview.currentWebview().opener();
											//触发父页面的自定义事件(refresh),从而进行刷新
											mui.fire(list, 'refresh');
											//返回true,继续页面关闭逻辑
											return true;
										}, 1000)
									}
								})
							}
						});
					},
					playAudio: function(text) {
						if(!text) {
							mui.toast('无效的音频文件');
							return;
						}
						var that = this;
						console.log(text)
						if(mui.os.ios) {
							if(that.filename == '') {
								var dtask = plus.downloader.createDownload(text, {}, function(d, status) {
									// 下载完成
									if(status == 200) {
										that.filename = d.filename 
									} else {
										mui.alert("Download failed: " + status);
									}
								});
								dtask.start(that.filename);
							}else{
								startPlay(that.filename)
							}

						} else {
							startPlay(text);
						}
					},
				}
			})

			mui.init()

			mui.plusReady(function() {
				FastClick.attach(document.body);
				var data = plus.webview.currentWebview();
				if(plus.storage.getItem("stand") == 3 && data.rouType != 1 && data.stand==0) {
					details.stand = true
				}
				details.pageData = data
				if(data.sate) {
					details.sate = false
				}

				getData(data) //请求详情页方法	
			})

			function dialipone(ipone) { // 拨打电话方法
				plus.device.dial(ipone, false);
			}

			function getData(data) { // 请求详情页方法
				mui.post(httpUrl.testUrl + '/api/Gtasks/GetGtasksDetails', {
					userID: plus.storage.getItem("userID"),
					rouID: data.rouID,
					rouType: data.rouType,
					gtaID: data.gtaID
				}, function(res) {
					console.log(res)
					if(res.code == 1001) {
						details.imgList = res.data.imgList.length > 0
						details.repairsLogList = res.data.repairsLogList.length > 0
						details.detailsData = res.data
						mui('#loadings')[0].style.display = "none";
					} else {
						mui.toast('网络错误')
					}
				})
			}

			var p = null

			function startPlay(url) {
				details.record = true;
				p = plus.audio.createPlayer(url);
				p.play(function() {
					details.record = false
					mui.toast('播放完成！');
					// 播放完成
				}, function(e) {
					details.record = false
					mui.alert('失败：' + e.message);
				});
			}

			mui.previewImage();
		</script>
	</body>

</html>